{% extends "adminBase.html" %}

{% block extrahead %}
<script type="text/javascript" src="/site_media/scripts/jquery/jquery.pack.js"></script>
<script type="text/javascript" src="/site_media/scripts/jquery/jquery.form.js"></script>
<link rel="stylesheet" href="/site_media/css/widgets.css" type="text/css" media="screen" />

<script type="text/javascript" charset="utf-8">
	$(document).ready(function() { 

	});
</script>

{% endblock %}

{% block bodyid %}tab3{% endblock %}

{% block sectionDivID %}components{% endblock %}

{% block adminContent %}
<div id="breadCrumbs">
<a href="/components">Components</a> » {{ component.name }}
</div>

<h1>Editing {{ component.name }}</h1>
<form action="/widgets/image/editSubmit/" method="post" accept-charset="utf-8" id="componentForm" enctype="multipart/form-data">
<table border="0" cellspacing="5" cellpadding="5">
	<tr>
		<th>Component Name: </th>
		<td><input type="text" name="componentName" value="{{ component.name }}" size="40" maxlength="200"/></td>
	</tr>
	<tr>
		<th>Component Description: </th>
		<td><textarea name="componentDescription" rows="2" cols="43">{{ component.description }}</textarea></td>
	</tr>
	<tr>
		<th>Display Label: </th>
		<td><input type="text" name="label" value="{{parameters.label}}" size="40"/></td>
	</tr>
	<tr>
		<th>File Name: </th>
		<td>{{parameters.fileName}}</td>
	</tr>
	<tr>
		<th>Image Preview:</th>
		<td><img src="{{parameters.webPath}}" class="widget_image"/>
			<p>Note: Images are restrained to a maximum width of 279 pixels.</p>
		</td>
	</tr>
	<tr>
		<th>Upload New Image: </th>
		<td><input type="file" name="imageUpload" size="20"></td>
	</tr>
</table>

<p><input type="hidden" name="comIM" value="{{ component.id }}"/><input type="submit" value="Save Changes" class="buttonSmall"/></p>
<div id="message">

</div>
</form>
{% endblock %}